﻿
<body>

    <div class="session-region" style="">
        <div template="top_bar" style="display:none" id="topbar"></div>
        <div id="header" style="">
            <table cellpadding="0" cellspacing="0" style="background-color: #e4e5e6 !important; ">
                <tr>
                    <td valign="middle" align="center" style="min-height:120px;min-width:120px;background-color:transparent !important">

                        <img src="/Assets/icons/back-black.png" style="width: 64px; height: 64px; background-color: transparent !important" ng-click="_back();" />

                    </td>
                    <td>
                        <div template="header_session">

                        </div>
                    </td>
                </tr>
            </table>

        </div>
        <div style="min-height: 40px;width:100%"></div>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td style="min-width:120px" rowspan="2" valign="top" id="leftCham">
                      
                    </td>
                    <td>
                        <table cellpadding="0" cellspacing="0" id="body">
                            <tr>
                                <td style="min-width: 560px; max-width: 560px" valign="top" id="leftSide">
                                    <table cellpadding="0" cellspacing="0">
                                      
                                        <tr>
                                            <td style="min-height:100px;">
                                         &nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div style="min-height: 220px; min-width: 500px" id="bigIcon" ng-class="[$$$hub_block_class()]">

                                                </div>
                                                <p id="description">
                                                   {{$$$hub_block_description()}}
                                                </p>
                                            </td>
                                        </tr>
                                    </table>


                                </td>
                                <td ng-transclude colspan="2" valign="top" id="rightSide" style="overflow-x: scroll" ></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                
            </table>

        </div>
    <script>
        $tmp.$s.$$$hub_block_class = function () {
            return window.top.$navigator.module.BlockClass;
        }
        $tmp.$s.$$$hub_block_description = function () {
          
            return $tmp.$s.$$$res("Detail." + window.$navigator.module.Caption, window.$navigator.module.Description, "Module_DetailDescription", "hubpage/hubpage.html");
        }
        $tmp.$s.$test = function () {
            
        };
        $tmp.$s.$watch(function () {
            return $($tmp.$e[0]).width()
        }, function (n, o) {
           
            if (angular.isUndefined(n)) return;
            if (n != o) {
                
                $tmp.letfSide = $($tmp.$e[0]).find("#leftSide");
                $tmp.leftCham = $($tmp.$e[0]).find("#leftCham");
                $($tmp.$e[0]).find("#rightSide").css("max-width", $(window).width() - $tmp.letfSide.width()  - $tmp.leftCham.width() - 20);
                $($tmp.$e[0]).find("#rightSide").css("min-width", $(window).width() - $tmp.letfSide.width() - $tmp.leftCham.width() - 20);
                $($tmp.$e[0]).find("#rightSide").css("max-height", $(window).height() - 160);
                $($tmp.$e[0]).find("#rightSide").css("min-height", $(window).height() - 160);
                
                Hammer($($tmp.$e[0])[0]).on("swipe", function (event) {
                    if (!$tmp.hsShowTopbar) {
                        $($tmp.$e[0]).find("#topbar").show();
                        $tmp.hsShowTopbar = true;
                    }
                    else {
                        $($tmp.$e[0]).find("#topbar").hide();
                        $tmp.hsShowTopbar = false;
                    }
                }).get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });;
                
                Hammer($($tmp.$e[0]).find("#header")[0]).on("hold", function (event) {
                    if (!$tmp.$isTopbarShow) {
                        $($tmp.$e[0]).find("#topbar").show();
                        $tmp.$isTopbarShow = true;
                    }
                    else {
                        $($tmp.$e[0]).find("#topbar").hide();
                        $tmp.$isTopbarShow = false;
                    }
                });
              
            }
        });
     
       
        $($tmp.$e[0]).mousedown(function (event) {
            if (event.which == 3) {
                if (!$tmp.$isTopbarShow) {
                    $($tmp.$e[0]).find("#topbar").show();
                    $tmp.$isTopbarShow = true;
                }
                else {
                    $($tmp.$e[0]).find("#topbar").hide();
                    $tmp.$isTopbarShow = false;
                }
            }
            
        });
        $tmp.$show = function () {
            $($tmp.$e[0]).show();
        };
        $tmp.$hide = function () {
            $($tmp.$e[0]).hide();
        };
    </script>
</body>

